<template>
<div id="footer">
    <div class="footer">
        <a v-bind:href="item.url" v-for="(item , key, index) in items" > {{item.title}}</a>
    </div>
</div>
</template>
<script>
    export default {
        name: 'FooterBar',
        data() {
            return {
                items: [{
                    'title': '首页',
                    'url': 'index.html#1'
                },{
                    'title': '产品',
                    'url': 'index.html#2'
                },{
                    'title': '活动',
                    'url': 'index.html#3'
                },{
                    'title': '联系',
                    'url': 'index.html#4'
                }]
            }
        }
    }
</script>
<style>
    .footer{height:5.3rem;width:100%;position: fixed;bottom:0;left:0;background: #009900;z-index: 999;}
    .footer a{width:25%;height:1rem;display:block;padding-top:3rem;float: left;font-size:1.5rem;color:#fff;text-align: center;}
    .footer a:nth-child(1){background: url("../assets/index.png");background-repeat:no-repeat;background-position:center 0.5rem;}
    .footer a:nth-child(2){background: url("../assets/produce.png");background-repeat:no-repeat;background-position:center 0.5rem;}
    .footer a:nth-child(3){background: url("../assets/us.png");background-repeat:no-repeat;background-position:center 0.5rem;}
    .footer a:nth-child(4){background: url("../assets/phone.png");background-repeat:no-repeat;background-position:center 0.5rem;}
</style>